<template>
  <v-container class="pa-4" fluid>
    <!-- Top: Search + Quick Actions -->
    <v-row class="align-center">
      <v-col cols="12" md="8">
        <v-text-field
          v-model="search"
          clearable
          density="comfortable"
          hide-details
          :placeholder="t('startPage.searchPlaceholder')"
          :prepend-inner-icon="mdiMagnify"
          variant="solo-filled"
          @keydown.enter="onSearch"
        />
      </v-col>
      <v-col class="d-flex flex-wrap ga-2 justify-end" cols="12" md="4">
        <v-btn color="primary" :prepend-icon="mdiAccountPlus" @click="emit('create-customer')">
          {{ t('startPage.createCustomer') }}
        </v-btn>
        <v-btn
          color="secondary"
          :prepend-icon="mdiBriefcasePlus"
          variant="tonal"
          @click="emit('create-deal')"
        >
          {{ t('startPage.createDeal') }}
        </v-btn>
        <v-btn :prepend-icon="mdiDatabaseImportOutline" variant="text" @click="emit('open-import')">
          {{ t('startPage.import') }}
        </v-btn>
      </v-col>
    </v-row>

    <!-- Middle: KPI cards -->
    <v-row class="mt-2">
      <v-col v-for="k in kpis" :key="k.key" cols="12" md="4" sm="6">
        <v-card rounded="lg" variant="tonal">
          <v-card-text>
            <div class="d-flex align-center justify-space-between">
              <div>
                <div class="text-caption text-medium-emphasis">{{ k.label }}</div>
                <div class="text-h5 font-weight-bold mt-1">{{ k.value }}</div>
              </div>
              <v-avatar color="primary" size="36" variant="tonal">
                <v-icon :icon="k.icon" />
              </v-avatar>
            </div>
            <div class="text-caption mt-2" :class="k.trend >= 0 ? 'text-success' : 'text-error'">
              {{ k.trend >= 0 ? '+' + k.trend : k.trend }}% {{ t('startPage.thisWeek') }}
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- Bottom: Recent + Right rail -->
    <v-row class="mt-2">
      <v-col cols="12" md="8">
        <v-card rounded="lg">
          <v-card-title>{{ t('startPage.recentUpdates') }}</v-card-title>
          <v-divider></v-divider>
          <v-list density="compact">
            <v-list-item v-for="item in recent" :key="item.id">
              <template #prepend>
                <v-avatar color="primary" size="28" variant="tonal">
                  <v-icon :icon="item.icon" />
                </v-avatar>
              </template>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
              <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
              <template #append>
                <span class="text-caption text-medium-emphasis">{{ item.time }}</span>
              </template>
            </v-list-item>
          </v-list>
        </v-card>
      </v-col>

      <v-col cols="12" md="4">
        <v-card rounded="lg">
          <v-card-title>{{ t('startPage.myTasks') }}</v-card-title>
          <v-divider />
          <v-list density="compact">
            <v-list-item v-for="task in tasks" :key="task.id">
              <template #prepend>
                <v-icon
                  :color="task.done ? 'success' : 'warning'"
                  :icon="task.done ? mdiCheckCircle : mdiClockOutline"
                />
              </template>
              <v-list-item-title>{{ task.title }}</v-list-item-title>
              <v-list-item-subtitle>{{ task.due }}</v-list-item-subtitle>
            </v-list-item>
          </v-list>
        </v-card>

        <v-card class="mt-4" rounded="lg">
          <v-card-title>{{ t('startPage.dueSoon') }}</v-card-title>
          <v-divider />
          <v-list density="compact">
            <v-list-item v-for="d in dueSoon" :key="d.id">
              <template #prepend>
                <v-icon color="error" :icon="mdiAlert" />
              </template>
              <v-list-item-title>{{ d.title }}</v-list-item-title>
              <v-list-item-subtitle>{{ d.when }}</v-list-item-subtitle>
            </v-list-item>
          </v-list>
        </v-card>

        <v-card class="mt-4" rounded="lg">
          <v-card-title>{{ t('startPage.quickNav') }}</v-card-title>
          <v-divider />
          <v-card-text class="d-flex flex-wrap ga-2">
            <v-chip
              v-for="nav in quickLinks"
              :key="nav.label"
              class="cursor-pointer"
              color="primary"
              variant="tonal"
              @click="emit('search', nav.query)"
            >
              <v-icon :icon="nav.icon" start />{{ nav.label }}
            </v-chip>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

import {
  mdiAccountBoxOutline,
  mdiAccountMultiplePlus,
  mdiAccountOutline,
  mdiAccountPlus,
  mdiAlert,
  mdiBriefcase,
  mdiBriefcaseOutline,
  mdiBriefcasePlus,
  mdiCardAccountPhone,
  mdiChartBoxOutline,
  mdiCheckCircle,
  mdiClockOutline,
  mdiCogOutline,
  mdiCurrencyCny,
  mdiDatabaseImportOutline,
  mdiLightbulbOutline,
  mdiMagnify
} from '@mdi/js'

const { t } = useI18n()

const _props = defineProps<{ userName?: string }>()
const emit = defineEmits<{
  (e: 'create-customer'): void
  (e: 'create-deal'): void
  (e: 'open-import'): void
  (e: 'open-settings'): void
  (e: 'search', keyword: string): void
}>()

const search = ref('')
const onSearch = () => emit('search', search.value)

const kpis = ref([
  { key: 'leads', label: '本周新线索', value: 24, trend: 12, icon: mdiAccountMultiplePlus },
  { key: 'deals', label: '进行中的交易', value: 18, trend: -3, icon: mdiBriefcaseOutline },
  { key: 'revenue', label: '预计收入(万)', value: 86, trend: 5, icon: mdiCurrencyCny }
])

const recent = ref([
  {
    id: 1,
    title: '张三 - 客户状态更新为“跟进中”',
    subtitle: '由 李丽 更新',
    time: '5 分钟前',
    icon: mdiAccountOutline
  },
  {
    id: 2,
    title: '交易 #D-1023 阶段推进到 “谈判/报价”',
    subtitle: '由 王强 更新',
    time: '30 分钟前',
    icon: mdiBriefcase
  },
  {
    id: 3,
    title: '新增线索：杭州某科技有限公司',
    subtitle: '来源：官网表单',
    time: '1 小时前',
    icon: mdiLightbulbOutline
  }
])

const tasks = ref([
  { id: 1, title: '回访：上海博创—采购经理', due: '今天 16:00', done: false },
  { id: 2, title: '准备华东区 Q4 报价方案', due: '明天', done: false },
  { id: 3, title: '更新客户资料：宁波远航', due: '本周五', done: true }
])

const dueSoon = ref([
  { id: 1, title: '交易 #D-1018 合同签署', when: '24 小时内' },
  { id: 2, title: '客户：苏州科锐 维护回访', when: '48 小时内' }
])

const quickLinks = ref([
  { label: '客户', icon: mdiAccountBoxOutline, query: 'type:customer' },
  { label: '联系人', icon: mdiCardAccountPhone, query: 'type:contact' },
  { label: '交易', icon: mdiBriefcase, query: 'type:deal' },
  { label: '报表', icon: mdiChartBoxOutline, query: 'type:report' },
  { label: '设置', icon: mdiCogOutline, query: 'type:settings' }
])
</script>

<style scoped>
.ga-2 {
  gap: 8px;
}
.cursor-pointer {
  cursor: pointer;
}
</style>

<i18n>
{
  "zhHans": {
    "startPage": {
      "searchPlaceholder": "搜索客户、联系人、交易...",
      "createCustomer": "新建客户",
      "createDeal": "新建交易",
      "import": "导入",
      "thisWeek": "本周",
      "recentUpdates": "最近更新",
      "myTasks": "我的待办",
      "dueSoon": "即将到期",
      "quickNav": "快速导航"
    }
  },
  "en": {
    "startPage": {
      "searchPlaceholder": "Search customers, contacts, deals...",
      "createCustomer": "New Customer",
      "createDeal": "New Deal",
      "import": "Import",
      "thisWeek": "This Week",
      "recentUpdates": "Recent Updates",
      "myTasks": "My Tasks",
      "dueSoon": "Due Soon",
      "quickNav": "Quick Navigation"
    }
  }
}
</i18n>
